<template>
  <div class="supply-chain-page">
    <el-card>
      <template #header>
        <div class="page-header">
          <h3>供应链管理</h3>
          <div class="header-actions">
            <el-button type="primary" @click="showPlanDialog">
              <el-icon><Calendar /></el-icon>
              供应计划
            </el-button>
            <el-button type="success" @click="showTrackDialog">
              <el-icon><Location /></el-icon>
              物流跟踪
            </el-button>
            <el-button type="warning" @click="showOptimizeDialog">
              <el-icon><DataAnalysis /></el-icon>
              优化建议
            </el-button>
            <el-button type="info" @click="exportReport">
              <el-icon><Download /></el-icon>
              导出报告
            </el-button>
          </div>
        </div>
      </template>

      <!-- 供应链概览 -->
      <div class="supply-overview">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="6" v-for="card in overviewCards" :key="card.id">
            <el-card class="overview-card" :class="card.type">
              <div class="card-content">
                <div class="card-icon">
                  <el-icon size="28"><component :is="card.icon" /></el-icon>
                </div>
                <div class="card-info">
                  <div class="card-value">{{ card.value }}</div>
                  <div class="card-label">{{ card.label }}</div>
                  <div v-if="card.trend" class="card-trend" :class="card.trend > 0 ? 'positive' : 'negative'">
                    <el-icon><component :is="card.trend > 0 ? 'CaretTop' : 'CaretBottom'" /></el-icon>
                    <span>{{ Math.abs(card.trend) }}%</span>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 主要内容区 -->
      <el-tabs v-model="activeTab" @tab-change="handleTabChange">
        <!-- 采购订单 -->
        <el-tab-pane label="采购订单" name="purchase">
          <div class="tab-content">
            <div class="content-header">
              <el-form :model="purchaseFilter" inline>
                <el-form-item label="订单状态">
                  <el-select v-model="purchaseFilter.status" placeholder="选择状态" clearable>
                    <el-option label="待确认" value="pending" />
                    <el-option label="已确认" value="confirmed" />
                    <el-option label="生产中" value="producing" />
                    <el-option label="已发货" value="shipped" />
                    <el-option label="已完成" value="completed" />
                  </el-select>
                </el-form-item>
                <el-form-item label="供应商">
                  <el-select v-model="purchaseFilter.supplier" placeholder="选择供应商" clearable>
                    <el-option label="供应商A" value="A" />
                    <el-option label="供应商B" value="B" />
                    <el-option label="供应商C" value="C" />
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="searchPurchaseOrders">查询</el-button>
                  <el-button @click="resetPurchaseFilter">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
            
            <el-table :data="purchaseOrders" border stripe>
              <el-table-column prop="orderNo" label="订单编号" width="150" />
              <el-table-column prop="supplierName" label="供应商" width="150" />
              <el-table-column prop="productName" label="商品名称" width="200" />
              <el-table-column prop="quantity" label="数量" width="100" />
              <el-table-column prop="status" label="状态" width="120">
                <template #default="{ row }">
                  <el-tag :type="getStatusType(row.status)">{{ getStatusText(row.status) }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="expectedDate" label="预计到货" width="150" />
              <el-table-column prop="progress" label="进度" width="150">
                <template #default="{ row }">
                  <el-progress :percentage="row.progress" :stroke-width="8" />
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200" fixed="right">
                <template #default="{ row }">
                  <el-button type="primary" size="small" @click="viewOrderDetail(row)">详情</el-button>
                  <el-button type="success" size="small" @click="trackOrder(row)">跟踪</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>

        <!-- 库存管理 -->
        <el-tab-pane label="库存管理" name="inventory">
          <div class="tab-content">
            <div class="inventory-summary">
              <el-row :gutter="20">
                <el-col :span="8">
                  <div class="summary-card">
                    <div class="summary-icon warning">
                      <el-icon size="24"><Warning /></el-icon>
                    </div>
                    <div class="summary-info">
                      <div class="summary-value">{{ inventoryStats.lowStock }}</div>
                      <div class="summary-label">库存预警</div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="summary-card">
                    <div class="summary-icon success">
                      <el-icon size="24"><Check /></el-icon>
                    </div>
                    <div class="summary-info">
                      <div class="summary-value">{{ inventoryStats.normal }}</div>
                      <div class="summary-label">库存正常</div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="summary-card">
                    <div class="summary-icon danger">
                      <el-icon size="24"><Close /></el-icon>
                    </div>
                    <div class="summary-info">
                      <div class="summary-value">{{ inventoryStats.outOfStock }}</div>
                      <div class="summary-label">缺货</div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
            
            <el-table :data="inventoryData" border stripe style="margin-top: 20px;">
              <el-table-column prop="productName" label="商品名称" width="200" />
              <el-table-column prop="sku" label="SKU" width="150" />
              <el-table-column prop="currentStock" label="当前库存" width="120" />
              <el-table-column prop="safetyStock" label="安全库存" width="120" />
              <el-table-column prop="warehouse" label="仓库位置" width="150" />
              <el-table-column prop="status" label="状态" width="120">
                <template #default="{ row }">
                  <el-tag :type="getInventoryStatusType(row.status)">{{ row.status }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="库存率" width="150">
                <template #default="{ row }">
                  <el-progress :percentage="getStockPercentage(row)" :stroke-width="8" :color="getStockColor(row)" />
                </template>
              </el-table-column>
              <el-table-column label="操作" width="150">
                <template #default="{ row }">
                  <el-button type="primary" size="small" @click="replenishStock(row)">补货</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>

        <!-- 物流跟踪 -->
        <el-tab-pane label="物流跟踪" name="logistics">
          <div class="tab-content">
            <div class="logistics-search">
              <el-form :model="logisticsFilter" inline>
                <el-form-item label="物流单号">
                  <el-input v-model="logisticsFilter.trackingNo" placeholder="请输入物流单号" clearable />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="searchLogistics">查询</el-button>
                </el-form-item>
              </el-form>
            </div>
            
            <div class="logistics-list">
              <div v-for="item in logisticsData" :key="item.id" class="logistics-item">
                <div class="logistics-header">
                  <div class="tracking-info">
                    <h4>{{ item.trackingNo }}</h4>
                    <el-tag :type="getLogisticsStatusType(item.status)">{{ item.status }}</el-tag>
                  </div>
                  <div class="logistics-meta">
                    <span>{{ item.carrier }}</span>
                    <span>{{ item.estimatedTime }}</span>
                  </div>
                </div>
                <div class="logistics-timeline">
                  <el-timeline>
                    <el-timeline-item 
                      v-for="(event, index) in item.events" 
                      :key="index"
                      :timestamp="event.time"
                      :type="index === 0 ? 'primary' : 'info'"
                      :hollow="index !== 0"
                    >
                      <div class="timeline-content">
                        <div class="event-title">{{ event.title }}</div>
                        <div class="event-desc">{{ event.description }}</div>
                        <div class="event-location">{{ event.location }}</div>
                      </div>
                    </el-timeline-item>
                  </el-timeline>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <!-- 供应商协同 -->
        <el-tab-pane label="供应商协同" name="collaboration">
          <div class="tab-content">
            <div class="collaboration-overview">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-card>
                    <template #header>
                      <span>供应商绩效</span>
                    </template>
                    <div class="chart-placeholder" style="height: 250px;">
                      <el-icon size="48"><TrendCharts /></el-icon>
                      <p>供应商绩效分析图</p>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="12">
                  <el-card>
                    <template #header>
                      <span>交货准时率</span>
                    </template>
                    <div class="chart-placeholder" style="height: 250px;">
                      <el-icon size="48"><PieChart /></el-icon>
                      <p>准时率分布图</p>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
            
            <el-table :data="supplierCollaboration" border stripe style="margin-top: 20px;">
              <el-table-column prop="supplierName" label="供应商" width="150" />
              <el-table-column prop="onTimeRate" label="准时率" width="150">
                <template #default="{ row }">
                  <el-progress :percentage="row.onTimeRate" :stroke-width="8" />
                </template>
              </el-table-column>
              <el-table-column prop="qualityRate" label="质量合格率" width="150">
                <template #default="{ row }">
                  <el-progress :percentage="row.qualityRate" :stroke-width="8" :color="getQualityColor(row.qualityRate)" />
                </template>
              </el-table-column>
              <el-table-column prop="responseTime" label="响应时间" width="120" />
              <el-table-column prop="cooperation" label="协作评分" width="150">
                <template #default="{ row }">
                  <el-rate v-model="row.cooperation" disabled show-score />
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200">
                <template #default="{ row }">
                  <el-button type="primary" size="small" @click="viewSupplierDetail(row)">详情</el-button>
                  <el-button type="success" size="small" @click="sendMessage(row)">沟通</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 供应计划对话框 -->
    <el-dialog
      v-model="planDialogVisible"
      title="供应计划"
      width="900px"
    >
      <div class="plan-dialog-content">
        <el-form :model="planForm" label-width="120px">
          <el-form-item label="计划名称">
            <el-input v-model="planForm.name" placeholder="请输入计划名称" />
          </el-form-item>
          <el-form-item label="计划周期">
            <el-date-picker
              v-model="planForm.period"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              style="width: 100%"
            />
          </el-form-item>
          <el-form-item label="商品需求">
            <el-table :data="planForm.items" border>
              <el-table-column prop="productName" label="商品名称" />
              <el-table-column prop="currentStock" label="当前库存" width="120" />
              <el-table-column prop="expectedDemand" label="预计需求" width="120" />
              <el-table-column prop="planQuantity" label="计划采购" width="120">
                <template #default="{ row }">
                  <el-input-number v-model="row.planQuantity" :min="0" size="small" />
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <el-button @click="planDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="savePlan" :loading="saveLoading">保存计划</el-button>
      </template>
    </el-dialog>

    <!-- 优化建议对话框 -->
    <el-dialog
      v-model="optimizeDialogVisible"
      title="供应链优化建议"
      width="800px"
    >
      <div class="optimize-content">
        <div class="suggestions-list">
          <div v-for="suggestion in optimizeSuggestions" :key="suggestion.id" class="suggestion-item">
            <div class="suggestion-icon" :class="suggestion.type">
              <el-icon size="24"><component :is="suggestion.icon" /></el-icon>
            </div>
            <div class="suggestion-info">
              <h4>{{ suggestion.title }}</h4>
              <p>{{ suggestion.description }}</p>
              <div class="suggestion-impact">
                <el-tag size="small">预计节省: ¥{{ formatNumber(suggestion.savings) }}</el-tag>
                <el-tag size="small" type="success">效果: {{ suggestion.impact }}</el-tag>
              </div>
            </div>
            <div class="suggestion-actions">
              <el-button type="primary" size="small" @click="applySuggestion(suggestion)">应用</el-button>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

// 响应式数据
const activeTab = ref('purchase')
const planDialogVisible = ref(false)
const optimizeDialogVisible = ref(false)
const saveLoading = ref(false)

// 概览卡片
const overviewCards = ref([
  { id: 1, label: '在途订单', value: '156', icon: 'Van', type: 'primary', trend: 12.5 },
  { id: 2, label: '待补货商品', value: '23', icon: 'Warning', type: 'warning', trend: -8.3 },
  { id: 3, label: '供应商数量', value: '45', icon: 'User', type: 'success', trend: 5.2 },
  { id: 4, label: '平均交货周期', value: '7天', icon: 'Clock', type: 'info' }
])

// 采购订单筛选
const purchaseFilter = reactive({
  status: '',
  supplier: ''
})

// 采购订单数据
const purchaseOrders = ref([
  {
    id: 1,
    orderNo: 'PO202401001',
    supplierName: '供应商A',
    productName: 'iPhone 15 Pro',
    quantity: 100,
    status: 'shipped',
    expectedDate: '2024-01-20',
    progress: 75
  },
  {
    id: 2,
    orderNo: 'PO202401002',
    supplierName: '供应商B',
    productName: 'MacBook Air',
    quantity: 50,
    status: 'producing',
    expectedDate: '2024-01-25',
    progress: 45
  }
])

// 库存统计
const inventoryStats = reactive({
  lowStock: 23,
  normal: 156,
  outOfStock: 5
})

// 库存数据
const inventoryData = ref([
  {
    id: 1,
    productName: 'iPhone 15 Pro',
    sku: 'SKU001',
    currentStock: 15,
    safetyStock: 50,
    warehouse: '北京仓',
    status: '库存预警'
  },
  {
    id: 2,
    productName: 'MacBook Air',
    sku: 'SKU002',
    currentStock: 80,
    safetyStock: 30,
    warehouse: '上海仓',
    status: '库存正常'
  }
])

// 物流筛选
const logisticsFilter = reactive({
  trackingNo: ''
})

// 物流数据
const logisticsData = ref([
  {
    id: 1,
    trackingNo: 'SF1234567890',
    carrier: '顺丰速运',
    status: '运输中',
    estimatedTime: '预计明天送达',
    events: [
      { time: '2024-01-15 14:30', title: '包裹已发出', description: '您的包裹已从上海仓发出', location: '上海市' },
      { time: '2024-01-15 10:00', title: '包裹已打包', description: '您的包裹已完成打包', location: '上海仓' },
      { time: '2024-01-15 09:00', title: '订单已确认', description: '供应商已确认订单', location: '供应商' }
    ]
  }
])

// 供应商协同数据
const supplierCollaboration = ref([
  {
    id: 1,
    supplierName: '供应商A',
    onTimeRate: 95,
    qualityRate: 98,
    responseTime: '2小时',
    cooperation: 4.5
  },
  {
    id: 2,
    supplierName: '供应商B',
    onTimeRate: 88,
    qualityRate: 92,
    responseTime: '4小时',
    cooperation: 4.2
  }
])

// 供应计划表单
const planForm = reactive({
  name: '',
  period: [],
  items: [
    { productName: 'iPhone 15 Pro', currentStock: 15, expectedDemand: 200, planQuantity: 0 },
    { productName: 'MacBook Air', currentStock: 80, expectedDemand: 150, planQuantity: 0 }
  ]
})

// 优化建议
const optimizeSuggestions = ref([
  {
    id: 1,
    title: '优化库存水平',
    description: '建议将iPhone 15 Pro的安全库存提高到80件，以应对销售高峰',
    type: 'info',
    icon: 'Box',
    savings: 15000,
    impact: '高'
  },
  {
    id: 2,
    title: '调整供应商',
    description: '供应商C的价格比当前供应商低8%，建议考虑切换',
    type: 'success',
    icon: 'Money',
    savings: 25000,
    impact: '中'
  },
  {
    id: 3,
    title: '优化配送路线',
    description: '建议合并上海和杭州的配送，可降低物流成本',
    type: 'warning',
    icon: 'Van',
    savings: 8000,
    impact: '中'
  }
])

// 方法
const handleTabChange = (tabName) => {
  activeTab.value = tabName
}

const getStatusType = (status) => {
  const statusMap = {
    'pending': 'info',
    'confirmed': 'primary',
    'producing': 'warning',
    'shipped': 'success',
    'completed': 'success'
  }
  return statusMap[status] || 'info'
}

const getStatusText = (status) => {
  const statusMap = {
    'pending': '待确认',
    'confirmed': '已确认',
    'producing': '生产中',
    'shipped': '已发货',
    'completed': '已完成'
  }
  return statusMap[status] || status
}

const getInventoryStatusType = (status) => {
  if (status === '库存预警') return 'warning'
  if (status === '库存正常') return 'success'
  if (status === '缺货') return 'danger'
  return 'info'
}

const getStockPercentage = (row) => {
  return Math.min(Math.round((row.currentStock / row.safetyStock) * 100), 100)
}

const getStockColor = (row) => {
  const percentage = getStockPercentage(row)
  if (percentage < 50) return '#f56c6c'
  if (percentage < 80) return '#e6a23c'
  return '#67c23a'
}

const getLogisticsStatusType = (status) => {
  if (status === '运输中') return 'primary'
  if (status === '已送达') return 'success'
  return 'info'
}

const getQualityColor = (rate) => {
  if (rate >= 95) return '#67c23a'
  if (rate >= 85) return '#e6a23c'
  return '#f56c6c'
}

const formatNumber = (value) => {
  return value.toLocaleString()
}

const searchPurchaseOrders = () => {
  ElMessage.success('查询采购订单')
}

const resetPurchaseFilter = () => {
  Object.assign(purchaseFilter, {
    status: '',
    supplier: ''
  })
}

const viewOrderDetail = (row) => {
  ElMessage.info(`查看订单详情: ${row.orderNo}`)
}

const trackOrder = (row) => {
  ElMessage.info(`跟踪订单: ${row.orderNo}`)
  activeTab.value = 'logistics'
}

const replenishStock = (row) => {
  ElMessage.success(`创建补货计划: ${row.productName}`)
}

const searchLogistics = () => {
  ElMessage.success('查询物流信息')
}

const viewSupplierDetail = (row) => {
  ElMessage.info(`查看供应商详情: ${row.supplierName}`)
}

const sendMessage = (row) => {
  ElMessage.success(`发送消息给: ${row.supplierName}`)
}

const showPlanDialog = () => {
  planDialogVisible.value = true
}

const showTrackDialog = () => {
  activeTab.value = 'logistics'
}

const showOptimizeDialog = () => {
  optimizeDialogVisible.value = true
}

const exportReport = () => {
  ElMessage.success('导出供应链报告')
}

const savePlan = async () => {
  saveLoading.value = true
  
  await new Promise(resolve => setTimeout(resolve, 2000))
  
  ElMessage.success('供应计划已保存')
  planDialogVisible.value = false
  saveLoading.value = false
}

const applySuggestion = (suggestion) => {
  ElMessage.success(`已应用优化建议: ${suggestion.title}`)
}
</script>

<style scoped>
.supply-chain-page {
  padding: 0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-header h3 {
  margin: 0;
  color: #303133;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.supply-overview {
  margin-bottom: 30px;
}

.overview-card {
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.overview-card.primary { border-left: 4px solid #409eff; }
.overview-card.success { border-left: 4px solid #67c23a; }
.overview-card.warning { border-left: 4px solid #e6a23c; }
.overview-card.info { border-left: 4px solid #909399; }

.card-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.card-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.overview-card.primary .card-icon { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.overview-card.success .card-icon { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
.overview-card.warning .card-icon { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
.overview-card.info .card-icon { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); }

.card-info {
  flex: 1;
}

.card-value {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 6px;
}

.card-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 4px;
}

.card-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
}

.card-trend.positive { color: #67c23a; }
.card-trend.negative { color: #f56c6c; }

.tab-content {
  padding: 20px 0;
}

.content-header {
  margin-bottom: 20px;
}

.inventory-summary {
  margin-bottom: 20px;
}

.summary-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.summary-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.summary-icon.warning { background: #e6a23c; }
.summary-icon.success { background: #67c23a; }
.summary-icon.danger { background: #f56c6c; }

.summary-info {
  flex: 1;
}

.summary-value {
  font-size: 28px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 4px;
}

.summary-label {
  font-size: 14px;
  color: #606266;
}

.logistics-search {
  margin-bottom: 20px;
}

.logistics-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.logistics-item {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.logistics-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.tracking-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tracking-info h4 {
  margin: 0;
  color: #303133;
  font-size: 18px;
}

.logistics-meta {
  display: flex;
  gap: 12px;
  font-size: 14px;
  color: #606266;
}

.logistics-timeline {
  padding-left: 20px;
}

.timeline-content {
  padding: 8px 0;
}

.event-title {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
  margin-bottom: 4px;
}

.event-desc {
  font-size: 13px;
  color: #606266;
  margin-bottom: 4px;
}

.event-location {
  font-size: 12px;
  color: #909399;
}

.collaboration-overview {
  margin-bottom: 20px;
}

.chart-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px dashed #dcdfe6;
  color: #909399;
}

.chart-placeholder p {
  margin: 10px 0 0 0;
  font-size: 14px;
}

.plan-dialog-content {
  padding: 20px 0;
}

.suggestions-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.suggestion-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #409eff;
}

.suggestion-item .suggestion-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.suggestion-icon.info { background: #409eff; }
.suggestion-icon.success { background: #67c23a; }
.suggestion-icon.warning { background: #e6a23c; }

.suggestion-info {
  flex: 1;
}

.suggestion-info h4 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 16px;
  font-weight: 600;
}

.suggestion-info p {
  margin: 0 0 8px 0;
  color: #606266;
  font-size: 14px;
}

.suggestion-impact {
  display: flex;
  gap: 8px;
}

.suggestion-actions {
  display: flex;
  align-items: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-actions {
    flex-direction: column;
    gap: 8px;
  }
  
  .logistics-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .suggestion-item {
    flex-direction: column;
    text-align: center;
  }
  
  .suggestion-actions {
    width: 100%;
    justify-content: center;
  }
}
</style>
